<template>
  <el-row>
    <el-col :span="24">
      <div class="header-info">
        <span class="header-name">工作台</span>
        <el-row>
          <el-col :span="16">
            <div class="user-profile">
              <div class="box-center">
                <Avatar :src="require(`@/assets/user.png`)" size="62" style="margin-right: 4px;margin-bottom: 2px" />
              </div>
              <div class="box-center">
                <div class="user-name">
                  <h2>你好，{{ user.nickname }}，开始您一天的工作吧！</h2>
                </div>
                <div class="text-center">
                  <iframe id="tianqi" scrolling="no" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"> </iframe>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'HeaderTab',
  props: {
    user: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="scss" scoped>
.p-content {
  font-weight: 500;
}
.a-link {
  cursor: pointer;
  color: #2d8cf0;
  background: transparent;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease;
}
.header-info {
  margin: 16px 24px;
  border-radius: 15px;
  margin: 20px 20px;
  .header-name {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
  }
}
.header-info .user-profile .box-center {
  margin: 10px 0;
  float: left;

  .user-info {
    margin-left: 10px;
  }
}
.user-name {
  margin-left: 10px;
  margin-bottom: 10px;
}
.text-center {
  margin-top: 4px;
  margin-left: 10px;
  color: #808695;
  height: 1px;
}
.usage {
  position: relative;
  float: left;
  margin-left: 30px;
  overflow: hidden;
  &__oops {
    color: #303133;
    opacity: 0;
    margin-bottom: -5px;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    &__num {
      font-size: 30px;
    }
  }
  &__headline {
    font-size: 20px;
    line-height: 24px;
    color: #222;
    font-weight: bold;
    opacity: 0;
    margin-bottom: 10px;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
  }
  &__info {
    font-size: 13px;
    line-height: 21px;
    color: grey;
    opacity: 0;
    margin-bottom: 0px;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
  }
  &__return-home {
    display: block;
    float: left;
    width: 110px;
    height: 36px;
    background: #1482f0;
    border-radius: 100px;
    text-align: center;
    color: #ffffff;
    opacity: 0;
    font-size: 14px;
    line-height: 36px;
    cursor: pointer;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }
  @keyframes slideUp {
    0% {
      transform: translateY(60px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
</style>
